<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:constants="http://www.tuanzi.com/constants/tags"
                template="/templates/template.xhtml">
    <ui:define name="title">发送文本短信</ui:define>
    <ui:define name="content">
        <h:form>

            <div class="topbar clearfix"
                 style="background: -webkit-linear-gradient(top,#f6f7f9 0,#ebedf0 100%);">
                <p:toolbar id="buttonToolBar">
                    <f:facet name="right">
                        <p:commandButton
                                icon="fa fa-bullhorn"
                                value="生成短链"
                                update="@form" actionListener="#{sendSmsBean.generateShortLink}"
                                rendered="#{!sendSmsBean.disableButton}">
                        </p:commandButton>
                        <p:commandButton
                                icon="fa fa-bullhorn"
                                value="应用短信模板"
                                update="@form" actionListener="#{sendSmsBean.fillTemplateContent}"
                                rendered="#{!sendSmsBean.disableButton}">
                        </p:commandButton>
                        <p:commandButton
                                actionListener="#{sendSmsBean.onSend}"
                                icon="fa fa-bullhorn"
                                value="发送"
                                update="@form"
                                rendered="#{!sendSmsBean.disableButton}">
                            <p:confirm header="提示信息" message="确定发送?" icon="ui-icon-alert"/>
                        </p:commandButton>
                        <p:button value="返回" icon="fa fa-reply-all"
                                  outcome="/views/family/user-info/send-sms/calculate-sms.xhtml"/>
                    </f:facet>
                </p:toolbar>
            </div>

            <div class="ui-fluid" style="padding-top: 30px;">
                <div class="ui-g">
                    <div class="ui-g-12">
                        <div class="card ui-g-12">
                            <div class="ui-g-1">
                                <p:outputLabel value="短信模板"/>
                            </div>
                            <div class="ui-g-11">
                                <p:inputText value="#{sendSmsBean.templateContent}"/>
                            </div>
                        </div>
                    </div>
                    <ui:repeat value="#{sendSmsBean.sendSmsVos}" var="sendSmsVo">
                        <div class="ui-g-12">
                            <div class="card ui-g-12">
                                <div class="ui-g-12">
                                    <h3><b><h:outputText value="#{sendSmsVo.calculateTaskName}"/> / <h:outputText
                                            value="#{sendSmsVo.calculateTaskPhoneCount}"/></b></h3>
                                </div>
                                <div class="ui-g-1">
                                    <p:outputLabel value="发送时间"/>
                                </div>
                                <div class="ui-g-11">
                                    <p:calendar value="#{sendSmsVo.executeTime}"
                                                locale="#{constants:get('LOCALE')}"
                                                timeZone="#{constants:get('TIME_ZONE')}"
                                                pattern="#{constants:get('DATETIME_FORMAT')}"
                                                readonlyInput="true"/>
                                </div>
                                <div class="ui-g-1">
                                    <p:outputLabel value="短信平台"/>
                                </div>
                                <div class="ui-g-11">
                                    <p:selectOneButton value="#{sendSmsVo.platformChannel}">
                                        <f:selectItems
                                                value="#{sendSmsBean.dictionaries[DictionaryCode.SMS_PLATFORM_CHANNEL]}"
                                                var="dic"
                                                itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                    </p:selectOneButton>
                                </div>
                                <div class="ui-g-12">
                                    <div class="card ui-g-12">
                                        <div class="ui-g-12">
                                            <h3>额外信息</h3>
                                        </div>
                                    </div>
                                    <div class="ui-g-1">
                                        <p:outputLabel value="短信平台模板编号"/>
                                    </div>
                                    <div class="ui-g-5">
                                        <p:selectOneMenu id="templateId" value="#{sendSmsVo.templateId}"
                                                         filter="true"
                                                         filterMatchMode="contains">
                                            <f:selectItem itemLabel="请选择" itemValue="" noSelectionOption="true"/>
                                            <f:selectItems
                                                    value="#{sendSmsBean.dictionaries[DictionaryCode.SMS_TEMPLATE_ID]}"
                                                    var="dic"
                                                    itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                        </p:selectOneMenu>
                                    </div>
                                    <div class="ui-g-1">
                                        <p:outputLabel value="彩信图片"/>
                                    </div>
                                    <div class="ui-g-5">
                                        <div class="ui-g-12 ui-g-nopad">
                                            <div class="ui-g-5 ui-g-nopad">
                                                <p:fileUpload
                                                        fileUploadListener="#{sendSmsVo.uploadImage}"
                                                        mode="advanced"
                                                        update="@this"
                                                        process="@this"
                                                        auto="true" sizeLimit="#{constants:get('UPLOAD_FILE_SIZE')}"
                                                        allowTypes="/(\.|\/)(#{constants:get('UPLOAD_FILE_SUFFIX')})$/"
                                                        label="上传"
                                                        invalidFileMessage="不支持上传文件类型"
                                                        invalidSizeMessage="文件过大"/>

                                            </div>

                                            <div class="ui-g-2"></div>

                                            <div class="ui-g-5 ui-g-nopad">
                                                <p:graphicImage id="image"
                                                                value="#{sendSmsVo.mmsPicUrl}"
                                                                width="40px"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h:panelGroup>
                                    <div class="ui-g-1">
                                        <p:outputLabel value="短链"/>
                                    </div>
                                    <div class="ui-g-9">
                                        <p:inputText value="#{sendSmsVo.shortLink}"
                                                     rendered="#{sendSmsVo.displayShortLink==null}"/>
                                        <p:inputText value="#{sendSmsVo.displayShortLink}"
                                                     rendered="#{sendSmsVo.displayShortLink!=null}" disabled="true"/>
                                    </div>
                                </h:panelGroup>

                                <div class="ui-g-2">
                                    <p:button value="打开"
                                              href="#{sendSmsVo.displayShortLink}"
                                              target="_blank"/>
                                </div>
                                <div class="ui-g-1">
                                    <p:outputLabel value="短信文案"/>
                                </div>
                                <div class="ui-g-11">
                                    <p:inputTextarea id="content" value="#{sendSmsVo.content}" rows="10"
                                                     counter="display" maxlength="70"
                                                     counterTemplate="剩余 {0} 字, 短信文案字数最大限制为70字"/>
                                    <h:outputText id="display"/>
                                </div>
                            </div>
                        </div>

                    </ui:repeat>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>